<template>
	<view class="container">
		<div class="toubaba">
			<u-avatar :src="userProfile.avatar" size="150rpx"></u-avatar>
		</div>
		<div class="u-form">
			<u-cell-group>
				<u-cell title="账号" :value="userProfile.userName"></u-cell>
				<u-cell title="所属角色" :value="userProfile.nickName"></u-cell>
				<u-cell title="手机号码" :value="userProfile.phonenumber"></u-cell>
			</u-cell-group>
		</div>
		<view style="margin-top: 100rpx;">
			<u-button color="#3c9cff" shape="circle" text="退出登录" @click="quit"></u-button>
		</view>
	</view>

</template>

<script>
	import indexApi from "@/api/index.js"
	import loginApi from "@/api/login.js"
	export default {
		data() {
			return {
				userName:'',
				userProfile: [],
				src: '@/static/img/logo.png',
			};
		},
		onLoad() {
			this.userProfile=[]
		},
		onShow(option) {
			uni.getStorage({
				key: 'userName',
				success: (res) => {
					this.userName = res.data
					this.getUserProfile()
				}
			})

		},
		methods: {
			getUserProfile() {
				indexApi.getUserProfile({userName:this.userName}).then(res => {
					this.userProfile = res.data.data
				})
			},
			caijian() {
				this.$u.route({
					url: 'pages/mine/touxiang',
					params: {
						destWidth: 300,
						rectWidth: 200,
						fileType: 'jpg'
					}
				});
			},
			quit(btn) {
				loginApi.logout().then(res => {
					if ((res.data.code == 200 && res.data)) {
						uni.removeStorageSync('token');
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}
				})
			}
		}
	};
</script>


<style scoped lang="scss">
	.container {
		height: 100vh;
		width: 100%;
	}

	.toubaba {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* 设置为垂直方向布局 */
	}

	.u-form {
		width: 100%;
		font-size: 32rpx;
		margin-top: 30rpx;
		background-color: white;
	}
</style>